<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <!--<title>Document</title>-->
    <!--<script src="js/react.development.js"></script>-->
    <!--<script src="js/react-dom.development.js"></script>-->
    <!--<script src="js/babel.min.js"></script>-->
    <!--<style>-->
    <!--.done{-->
        <!--text-decoration: line-through;-->
        <!--color: rebeccapurple;-->
    <!--}-->
    <!--</style>-->
<!--</head>-->
<!--<body>-->
   <!--<div id="app"></div> -->


   <!--<script type='text/babel'>-->
        <!--class TodoList extends React.Component{-->

            <!--constructor(props){-->
                <!--super(props);-->
                <!--this.taskInputRef=React.createRef()-->
                <!--this.state={-->
                    <!--todos:[-->
                            <!--{id:'001',task:'吃🍚'},-->
                            <!--{id:'002',task:'买🍉'},-->
                            <!--{id:'003',task:'开🚗'}-->
                        <!--]-->
                <!--}-->
            <!--}-->

            <!--doneItem(event,todo){-->
                <!--// console.log(event.target.checked);-->
                <!--let todos=this.state.todos.map(item=>{-->
                    <!--if(todo===item){-->
                        <!--return{task:item.task,done:event.target.checked}-->
                    <!--}else{-->
                        <!--return item;-->
                    <!--}-->
                <!--});-->
                <!--this.setState({-->
                    <!--todos:todos-->
                <!--})-->
                <!---->
            <!--}-->

            <!--addTask(){-->
                <!--let taskText=this.taskInputRef.current.value;-->
                <!--console.log(taskText);-->
                <!--let todos=[...this.state.todos,{task:taskText,done:false}];-->
                <!--this.setState({todos:todos})-->
            <!--}-->



            <!--render(){-->
                <!--let doneCount=0;-->
                <!--let lis=this.state.todos.map((todo,index)=>{-->
                <!--if(todo.done){-->
                    <!--doneCount++;-->
                <!--}-->
                    <!--return (-->
                        <!--<li className={todo.done?'done':''} key={index}>-->
                           <!---->
                            <!--序号{index+1}、{todo.task}-->
                            <!--<input type='checkbox' onChange={e=>this.doneItem(e,todo)} />-->
                        <!--</li>-->
                    <!--)-->
                <!--})-->
               <!--return (-->
                <!--<div>-->
                    <!--<input ref={this.taskInputRef} type='text'/><button onClick={e=>this.addTask()}>提交</button>-->
                    <!--<ul>-->
                        <!--{lis}-->
                        <!--<hr/>-->
                        <!--已完成：{doneCount}-->
                        <!--未完成：{this.state.todos.length-doneCount}-->
                    <!--</ul>-->
                <!--</div>-->
               <!--) -->
            <!--}-->
        <!--}-->


        <!--ReactDOM.render(<TodoList />,document.getElementById('app'))-->
   <!--</script>-->
<!--</body>-->
<!--</html>-->

